import React from "react";
import Admin from "../../../layout/Admin";
import EuroPlanModel from "../../../model/euro";
import {Button, Form, Input, InputNumber, Modal, Popover, Table} from "antd";
import PaginationFooter from "../../../component/PaginationFooter/PaginationFooter";
import moment from "moment";
import {formLayout, formTailLayout} from "../../operation/vote/vote";
import Info from "../../../service/info";
const log = console.log.bind(console)

class EuroPlan extends React.Component {
    constructor(props) {
        super(props)
        this.model = new EuroPlanModel()
        this.state = {
            p: 0,
            list: 0,
            title: '',
            editValue: null,
            modal: {
                set: false,
            }
        }
        this.columns = [
            // Avatar: "https://youtoball.oss-cn-shenzhen.aliyuncs.com/avatar/10eb0476-b02d-43cd-b443-ffa401fc1d95.jpg"
            // Avatarke: ""
            // Awardke: 0
            // Awardzhu: 0
            // Goodat: (2) ["亚指", "欧指"]
            // Goodatke: null
            // Kecount: 211
            // Kename: "第2场半决赛胜者"
            // Kereason: ""
            // Matchid: 51
            // Name: "车路士的朗拿度"
            // Name2: ""
            // Nameke: ""

            // Result: 1
            // Startt: 1626030000
            // State: 1
            // Uid1: ""
            // Uid2: ""
            // Zhucount: 267
            // Zhuname: "第1场半决赛胜者"
            // Zhureason: ""

            // Namiid: 0
            {
                title: '纳米ID',
                dataIndex: 'Namiid',
            },

            {
                title: '方案ID',
                dataIndex: 'Matchid',
            },

            {
                title: '比赛',
                render: (record) => {
                    return (
                        <span>{record.Zhuname} vs {record.Kename}</span>
                    )
                }
            },

            {
                title: '开始时间',
                dataIndex: 'Startt',
                render: (time) => <span>{moment(new Date(time * 1000)).format('YYYY-MM-DD HH:mm')}</span>
            },

            {
                title: '主胜原因',
                render: (record) => {
                    return (
                        <Popover
                            title='主胜原因'
                            content={record.Zhureason}
                        >
                            <a>查看</a>
                        </Popover>
                    )
                }
            },

            {
                title: '客胜原因',
                render: (record) => {
                    return (
                        <Popover
                            title='客胜原因'
                            content={record.Kereason}
                        >
                            <a>查看</a>
                        </Popover>
                    )
                }
            },

            {
                title: '支持人数',
                render: (record => {
                    return <span>主：{record.Zhucount} 客：{record.Kecount}</span>
                })
            },

            {
                title: '展示支持人数',
                render: (record => {
                    return <span>主：{record.Fakezhucount} 客：{record.Fakekecount}</span>
                })
            },

            {
                title: '翻红倍率',
                render: (record => {
                    return <span>主：{record.Awardzhu} 客：{record.Awardke}</span>
                })
            },

            {
                title: '操作',
                render: (record => {
                    return <div className='action-links'>
                        <a onClick={() => this.callEdit(record)}>编辑</a>
                    </div>
                })
            },

        ]
    }

    componentDidMount() {
        this.all()
    }

    all() {
        const params = {
            P: this.state.p,
        }
        this.model
            .all(params)
            .then(res => {
                const list = res.data.ok
                log(list)
                if (list) {
                    this.setState({
                        list,
                    })
                }
            })
    }

    prevPage = () => {
        this.setState({
            p: this.state.p - 1,
        }, () => this.all())
    }

    nextPage = () => {
        this.setState({
            p: this.state.p + 1,
        }, () => this.all())
    }

    callModal(key) {
        this.setState({
            ...this.state,
            modal: {
                ...this.state.modal,
                [key]: true,
            }
        })
    }

    cancelModal(key) {
        this.setState({
            ...this.state,
            modal: {
                ...this.state.modal,
                [key]: false
            }
        })
    }

    callEdit = (record) => {
        this.callModal('set')
        this.setState({
            editValue: record,
            title: `${record.Zhuname} vs ${record.Kename}`,
        })
        setTimeout(() => {
            this.setForm.setFieldsValue({
                ...record,
            })
        }, 0)
    }

    onSetFormCancel = () => {
        this.cancelModal('set')
        this.setForm.resetFields()
    }

    onSet = (value) => {
        log(value)
        const params = {
            ...value,
            Matchid: this.state.editValue.Matchid,
        }
        this.model
            .set(params)
            .then(res => {
                const data = res.data
                log(data)
                if (data.ok) {
                    Info.success('编辑成功')
                    this.all()
                    this.onSetFormCancel()
                }
            })
    }

    render() {
        return (
            <>
                <Modal
                    visible={this.state.modal.set}
                    onCancel={() => this.onSetFormCancel()}
                    footer={null}
                    title={this.state.title}
                    width='80%'
                >
                    <Form
                        {...formLayout}
                        name='set'
                        ref={el => this.setForm = el}
                        onFinish={this.onSet}

                    >
                        <Form.Item
                            label="主胜理由"
                            name="Zhureason"
                        >
                            <Input.TextArea placeholder='请输入主胜理由'/>
                        </Form.Item>
                        <Form.Item
                            label="客胜理由"
                            name="Kereason"
                        >
                            <Input.TextArea placeholder='请输入客胜理由'/>
                        </Form.Item>
                        <Form.Item
                            label="展示主胜人数"
                            name="Fakezhucount"
                        >
                            <InputNumber placeholder='请输入展示主胜人数'/>
                        </Form.Item>
                        <Form.Item
                            label="展示客胜人数"
                            name="Fakekecount"
                        >
                            <InputNumber placeholder='请输入展示主胜人数'/>
                        </Form.Item>
                        <Form.Item
                            label="主胜倍率"
                            name="Awardzhu"
                        >
                            <InputNumber placeholder='请输入主胜倍率'/>
                        </Form.Item>
                        <Form.Item
                            label="客胜倍率"
                            name="Awardke"
                        >
                            <InputNumber placeholder='请输入客胜倍率'/>
                        </Form.Item>
                        <Form.Item {...formTailLayout}>

                            <Button type="primary" htmlType="submit">
                                Submit
                            </Button>

                        </Form.Item>
                    </Form>

                </Modal>
                <Admin>
                    <div className='list-container'>
                        <Table
                            dataSource={this.state.list}
                            columns={this.columns}
                            pagination={false}
                            rowKey={(record, index) => index}
                        />
                        <PaginationFooter
                            pageIndex={this.state.p}
                            prevPage={this.prevPage}
                            nextPage={this.nextPage}
                        />
                    </div>
                </Admin>
            </>
        )
    }
}

export default EuroPlan